<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.p1 {
				display: inline-grid;
				grid-template-columns: auto auto auto;
			}

			.p2 {
				padding: 20px;
				margin: 10px;
				background-color: #ccc;
			}
			
			.p3 {
				display: inline-grid;
				grid-template-columns: auto auto auto;
				grid-template-rows: 100px 200px 300px;
				/*使用grid-column-gap设置横向间距*/
				grid-column-gap:50px;
				/*使用grid-row-gap设置纵向间距*/
				grid-row-gap: 50px;
			}
			
			.p4 {
				display: inline-grid;
				grid-template-columns: auto auto auto;
			}
			
			.p5{
				grid-column-start: 1;
				grid-column-end: 3;
			}
		</style>
	</head>
	<body>
		<div class="p1">
			<div class="p2">1</div>
			<div class="p2">2</div>
			<div class="p2">3</div>
			<div class="p2">4</div>
			<div class="p2">5</div>
			<div class="p2">6</div>
			<div class="p2">7</div>
			<div class="p2">8</div>
			<div class="p2">9</div>
		</div>
		
		<!--
		grid-template-columns
		grid-template-rows
		grid-column-gap
		grid-row-gap
		-->
		<div class="p3">
			<div class="p2">1</div>
			<div class="p2">2</div>
			<div class="p2">3</div>
			<div class="p2">4</div>
			<div class="p2">5</div>
			<div class="p2">6</div>
			<div class="p2">7</div>
			<div class="p2">8</div>
			<div class="p2">9</div>
		</div>
		
		<!--使用网格线-->
		<div class="p4">
			<div class="p2 p5">1</div>
			<div class="p2">2</div>
			<div class="p2">3</div>
			<div class="p2">4</div>
			<div class="p2">5</div>
			<div class="p2">6</div>
			<div class="p2">7</div>
			<div class="p2">8</div>
		</div>
		
	</body>
</html>